<template>
  <view class="xuniList" :style="dataPeizhi.bgStyle">
    <view class="xuniHeader">
      <view class="header flex flex-bt">
        <view class="left">
          <view class="name">我的{{ dataPeizhi.name }}</view>
          <view class="number">10,424</view>
        </view>
        <view class="right flex flex-align">
          <view class="rightBtn flex flex-align flex-center">
            <image  :src="dataPeizhi.icon1" mode="scaleToFill"  />
            <view class="btnName">收支明细</view>
          </view>
          <view class="rightBtn flex flex-align flex-center">
            <image  :src="dataPeizhi.icon2" mode="scaleToFill"  />
            <view class="btnName">查看订单</view>
          </view>
        </view>
      </view>
      <view class="leiji flex flex-align flex-bt">
        <view class="left">
          <view class="title">累计获得{{dataPeizhi.name}} <text>21,987</text> </view>
        </view>
        <view class="right flex flex-align ">
          <view class="title">{{dataPeizhi.name}}说明</view>
          <uni-tooltip content="tooltip显示的内容" placement="left">
            <image src="@/static/shop/shop11.png"  mode="scaleToFill" />
          </uni-tooltip>
          
        </view>
      </view>
    </view>
    <view class="selectBtn flex flex-align">
      <view :class="tabInx==0?'flex-1 active':'flex-1'" @click="tabSelect(0)">全部商品</view>
      <view :class="tabInx==1?'flex-1 active':'flex-1'" @click="tabSelect(1)">兑换商品</view>
      <view :class="tabInx==2?'flex-1 active':'flex-1'" @click="tabSelect(2)">组合支付</view>
      <view :class="tabInx==3?'flex-1 active':'flex-1'" @click="tabSelect(3)">现金支付</view>
    </view>
    <view class="shopList">
      <view class="fenHeader flex flex-align">
        <image src="@/static/fenlei/fenlei01.png" mode="scaleToFill" />
        <input type="text" v-model="keyword" placeholder="输入关键词搜索">
        <button>搜索</button>
      </view>
      <view class="xuniItem">
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref, onMounted, reactive } from 'vue'
const type = ref(0)
const keyword = ref('')
const dataPeizhi = reactive({
  bgStyle: `background: #F1D7D0;background-image:url('/static/shop/shop14.png');background-size: 100%;background-repeat: no-repeat;`,
  name:'礼品卡',
  icon1:'/static/shop/shop13.png',
  icon2:'/static/shop/shop12.png'
})
onLoad((e: any) => {
  type.value = e.type
  uni.setNavigationBarTitle({
    title: e.type==1?'礼品卡':e.type==2?'昨日观看人数':''
  })
})
const tabInx = ref(0)
function tabSelect(index: number) {
  tabInx.value = index
}
</script>

<style scoped lang="scss">
.xuniList{width: 100vw;height: 100vh;box-sizing: border-box;padding: 26rpx;overflow-y: auto;
  .xuniHeader{padding-top: 60rpx;color: #fff;
    .header{width: 100%;height: 100%;padding: 0 0 0 10rpx;box-sizing: border-box;
      align-items: flex-end;
      .left{width: 60%;height: 100%;
        .name{font-size: 26rpx;margin-bottom: 10rpx;}
        .number{font-size: 48rpx;font-weight: bold;}
      }
      .right{
        .rightBtn{padding: 10rpx 0rpx;width: 200rpx;text-align: center;
          background: #fff;border-radius:60rpx;margin-left: 20rpx;
          image{width: 48rpx;height: 48rpx;}
          .btnName{font-size: 24rpx;color: #E86A5B;font-weight: bold;}
        }
      }
    }
   .leiji{margin-top:30rpx;
     .left{
       .title{font-size: 28rpx;
          text{font-weight: bold;}
        }
      }
     .right{
      .title{font-size: 24rpx;
      }
      image{width: 36rpx;height: 36rpx;margin-left: 10rpx;}
     }
    }
  }
  .selectBtn{margin-top:40rpx;
    .flex-1{font-size: 26rpx;text-align: center;line-height: 70rpx;background: #fff;border-radius: 50rpx;margin-right: 20rpx;font-weight: bold;color: #323233;}
    .active{color: #E86A5B;position: relative;}
    .active::after{position: absolute;bottom: -44rpx;left: 50%;content: '';width: 0;height: 0;border-style: solid;border-width: 0px 28rpx 25rpx 28rpx;
    border-color: transparent transparent #fff transparent;margin-left: -28rpx;}
    .flex-1:last-child{margin-right: 0;}
  }
  .shopList{
    background: #fff;border-radius: 20rpx;padding: 30rpx;margin-top: 40rpx;
    .fenHeader{background: #F5F6F7;border-radius: 80rpx;height: 80rpx;padding: 0 20rpx;
      margin: 0 0rpx 26rpx;
      image{width: 48rpx;height: 48rpx;}
      input{font-size: 26rpx;width: 440rpx;}
      button{padding: 0rpx 30rpx;background:#FE7431;color: #fff;border-radius: 60rpx;font-size: 24rpx;}
    }
    .xuniItem{height:calc(100vh - 600rpx);overflow-y: auto;}
  }
}
</style>